<script lang="ts">
	let d: string =
		'M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z';
	import anime from 'animejs';
	function start(params) {
		let dd = anime.path('.motion-path-demo path');

		anime({
			targets: '.motion-path-demo .el',
			translateX: dd('x'),
			translateY: dd('y'),
			rotate: dd('angle'),
			easing: 'linear',
			duration: 2000,
			loop: true
		});
	}
</script>

<div class=" motion-path-demo" on:click={start}>
	<div class="motion-path">
		<div class="shadow small square follow-path" />
		<div class="small square el follow-path" />

		<svg width="256" height="130" viewBox="0 0 256 112">
			<path fill="none" stroke="#f40" stroke-width="1" {d} />
		</svg>
	</div>
</div>

<style>
	/* .small.label {
    height: 18px;
    padding-left: 28px;
  }

  .large.label {
    height: 48px;
    padding-left: 58px;
  } */

	.motion-path {
		position: relative;
		width: 256px;
		margin: auto;
	}
	.shadow {
		position: absolute;
		opacity: 0.2;
	}
	.square {
		pointer-events: none;
		position: relative;
		width: 28px;
		height: 28px;
		margin: 1px;
		background-color: currentColor;
		font-size: 14px;
	}
	.follow-path {
		position: absolute;
		top: -9px;
		left: -9px;
	}
	.small {
		width: 18px;
		height: 18px;
		background-color: yellowgreen;
	}

	/* .small .triangle {
    border-width: 0 10px 17px 10px;
  } */
</style>
